<template>
  <el-row class="container">
    <el-col :span="24">
      <h2>角色权限设置</h2>
      <el-table
        border
        :data="list">
        <el-table-column
          width="200"
          align="center"
          prop=""
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleEdit(scope.row.id)"
            >编辑
            </el-button>
            <el-button v-if="scope.row.roleName !== 'admin'"
                       size="mini"
                       type="danger"
                       @click="handleRemove(scope.row.id)">删除
            </el-button>
            <add-charactor-dialog :show.sync="editCharactorDialogShow" @success="initData" :dataItem="scope.row" :isedit="true"
                                  v-if="editCharactorDialogId === scope.row.id"></add-charactor-dialog>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="roleName"
          label="名称">
        </el-table-column>
        <el-table-column
          v-for="(item,index) in privileges"
          :key="index"
          align="center"
          prop="name"
          :label="item.genre">
          <template slot-scope="scope">
            {{scope.row[item.name] ? '√' : '-'}}
          </template>
        </el-table-column>
      </el-table>
      <app-pagination
        :currentPage.sync="listData.page"
        :size.sync="listData.size"
        :total="listData.total"
        @handleCurrentChange="initData()"
        @handleSizeChange="initData()"
      ></app-pagination>
      <div class="add_btn_box">
        <el-button @click="AddCharactorDialogShow = true" type="primary" size="mini">新增</el-button>
      </div>
    </el-col>
    <add-charactor-dialog :show.sync="AddCharactorDialogShow" @success="initData"
                          v-if="AddCharactorDialogShow"></add-charactor-dialog>
  </el-row>
</template>
<script>
  import ApiClient from '@/utils/ApiClient'
  import AppPagination from '@/components/AppPagination'
  import AddCharactorDialog from './AddCharactorDialog'

  export default {
    components: {
      'app-pagination': AppPagination,
      'add-charactor-dialog': AddCharactorDialog
    },
    data() {
      return {
        listData: {
          page: 1,
          size: 10,
          items: null,
          total: null,
          totalPage: null,
        },
        privileges: [],
        AddCharactorDialogShow: false,
        editCharactorDialogShow: true,
        editCharactorDialogId: null,
      }
    },
    methods: {
      initData() {
        ApiClient.get('/backend/role/list.do', {page: this.listData.page, size: this.listData.size}).then(data => {
          this.listData = data
        })
        ApiClient.get('/backend/common/privilegesList.do').then(data => {
          this.privileges = data
          console.log(data)
        })
      },
      handleEdit(id) {
        this.editCharactorDialogShow = true;
        this.editCharactorDialogId = id;
      },
      handleRemove(id){
        ApiClient.delete('/backend/role/txDelete.do',{id:id}).then(data=>{
          this.initData()
        })
      }
    },
    computed: {
      list: function () {
        if (this.listData.items && this.privileges) {
          let listData = _.cloneDeep(this.listData.items);
          let privileges = _.cloneDeep(this.privileges);
          listData.forEach(function (v) {
            if (v.privilegeIds === 'all') {
              privileges.forEach(function (n) {
                v[n.name] = true
              })
            } else if(v.privilegeIds === null){

            }else {
              v.privilegeIds.split(',').forEach(function (p, i) {
                privileges.forEach(function (m) {
                  if (m.id === p * 1) {
                    v[m.name] = true;
                  }
                })
              })
            }
          })
          return listData
        }
      }
    },
    mounted() {
      this.initData()
    }
  }
</script>
<style scoped lang="scss">
  .container {
    h2 {
      margin-bottom: 20px;
    }
    .add_btn_box {
      margin-top: 20px;
      .el-button {
      }
    }
  }

</style>
